<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    
    <input id="upload" type="file"></input>
    <button id="btn">上传</button>
    <script>
        jQuery("#btn").on('click', f2);
        function f1() {
            console.log(123)
            var file = jQuery('#upload')[0].files[0]
            // var fw = {
            //     'fwimage': file,
            //     'test': 'test'
            // }
            var data = new FormData();
            file.name = 'TEST';
            data.append('fwimage', file);
            data.append('test', 'test')
            console.log('data', data)
            // data.append('test', 'test');
            // data.append('fwimage', fw)
            console.log('data', data)
            jQuery.ajax({
                url: "https://10.99.160.39:9527/upload",
                type: "POST",
                data: data,
                contentType: false,
                processData: false,
                dataType: "json",
                cache: false,
                xhr: function () {
                    var xhr = jQuery.ajaxSettings.xhr();
                    //console.log(xhr.upload);
                    if (xhr.upload) {
                        xhr.upload.addEventListener('progress', function (evt) {
                            if (evt.lengthComputable) {
                                // console.log(evt.loaded / evt.total);
                                var percentComplete = Math.floor(evt.loaded / evt.total * 100);
                                // jQuery("#fwFileProgress").html(app.lang.fwUpdate.uploadProgress + percentComplete + "%").show();
                            }
                        }, false);
                    }
                    return xhr;
                },
                success: function (data, status, xhr) {
                    // art.dialog.clearWait();
                    // thiz.step2_2();
                    console.log('success')
                },
                error: function (data, status, xhr) {
                    // art.dialog.clearWait();
                    // art.dialog.alert(app.lang.fwUpdate.uploadFwFailToStep1, app.lang.public.closeBtn, app.lang.public.message, function (e) {
                    //     thiz.initialize();
                    // });
                    console.log('data', data)
                    console.log('status', status)
                    console.log('xhr', xhr)
                }
            });            
        }


        function f2() {
            var file = jQuery('#upload')[0].files[0]
            var totalSize = file.size; // 文件总大小
                const LENGTH = 1024*1024;  // 分隔单位1MB
                var num = Math.ceil(totalSize/LENGTH); // 包的总个数
                var start = 0;
                var end = start + LENGTH;
                var count = 1; // 记录传的包的个数
                ajaxUpload(start, end, LENGTH, totalSize, count, num);
        }

        function ajaxUpload(start, end, LENGTH, totalSize, count, num) {
                var file = jQuery('#upload')[0].files[0]
                var blob = file.slice(start, end);
                var data = new FormData();
                data.append('fwimage', blob);
                data.append('ima_size', totalSize);
                data.append('ima_id', count);
                data.append('ima_num', num);
                jQuery.ajax({
                    url: "https://10.99.160.39:9527/upload",
                    type: "POST",
                    data: data,
                    contentType: false,
                    processData: false,
                    dataType: "json",
                    cache: false,
                    xhr: function () {
                        var xhr = jQuery.ajaxSettings.xhr();
                        if (xhr.upload) {
                            // xhr.upload.addEventListener('progress', function (evt) {
                            //     if (evt.lengthComputable) {
                            //         // console.log(evt.loaded / evt.total);
                            //         var percentComplete = Math.floor(evt.loaded / evt.total * 100);
                            //         jQuery("#fwFileProgress").html(app.lang.fwUpdate.uploadProgress + percentComplete + "%").show();
                            //     }
                            // }, false);
                        }
                        return xhr;
                    },
                    success: function (data, status, xhr) {
                        var percentComplete = Math.ceil(100 * end / totalSize); // 进度
                        start = end;
                        end = start + LENGTH;
                        if (count == num) {
                            console.log('=======')
                            // art.dialog.clearWait();
                            // thiz.step2_2();
                        } else {
                            count = count + 1;
                            ajaxUpload(start, end, LENGTH, totalSize, count, num);
                        }
                        if (percentComplete > 100) {
                            percentComplete = 100;
                        }
                        // jQuery("#fwFileProgress").html(app.lang.fwUpdate.uploadProgress + percentComplete + "%").show();
                        console.log('success')
                     },
                    error: function (data, status, xhr) {
                        // art.dialog.clearWait();
                        // art.dialog.alert(app.lang.fwUpdate.uploadFwFailToStep1, app.lang.public.closeBtn, app.lang.public.message, function (e) {
                        //     thiz.initialize();
                        // });
                        console.log('error')
                    }
                });            
        };
    </script>
</body>

</html>